<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小型超市管理系统 - 系统功能框架图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 5px;
        }

        .container {
            width: 100%;
            height: 100vh;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            padding: 15px;
            text-align: center;
            flex-shrink: 0;
        }

        .header h1 {
            font-size: 1.8em;
            margin-bottom: 3px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 0.9em;
            opacity: 0.9;
        }

        .architecture {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            padding: 15px;
            flex: 1;
            overflow-y: auto;
        }

        .section {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 12px;
            border: 1px solid #e9ecef;
        }

        .section h2 {
            color: #2c3e50;
            font-size: 1.3em;
            margin-bottom: 10px;
            text-align: center;
            border-bottom: 2px solid #3498db;
            padding-bottom: 5px;
        }

        .modules-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .module {
            background: white;
            border-radius: 4px;
            padding: 8px;
            border-left: 3px solid #3498db;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .module h3 {
            color: #2c3e50;
            font-size: 0.9em;
            margin-bottom: 5px;
        }

        .module ul {
            list-style: none;
            padding-left: 0;
        }

        .module li {
            padding: 2px 0;
            color: #555;
            position: relative;
            padding-left: 12px;
            font-size: 0.8em;
            line-height: 1.3;
        }

        .module li:before {
            content: "•";
            color: #3498db;
            font-weight: bold;
            position: absolute;
            left: 0;
        }

        .database-section {
            grid-column: 1 / -1;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .database-section h2 {
            color: white;
            border-bottom-color: white;
        }

        .db-table {
            background: rgba(255,255,255,0.1);
            border-radius: 4px;
            padding: 8px;
            margin-bottom: 8px;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .db-table h4 {
            color: #fff;
            font-size: 0.9em;
            margin-bottom: 4px;
        }

        .db-table p {
            color: rgba(255,255,255,0.9);
            font-size: 0.75em;
            line-height: 1.2;
        }

        .tech-stack {
            grid-column: 1 / -1;
            background: #ecf0f1;
            text-align: center;
        }

        .tech-stack h2 {
            color: #2c3e50;
            border-bottom-color: #e74c3c;
        }

        .tech-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }

        .tech-item {
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .tech-item h4 {
            color: #2c3e50;
            margin-bottom: 5px;
            font-size: 0.9em;
        }

        .tech-item p {
            color: #7f8c8d;
            font-size: 0.75em;
            line-height: 1.2;
        }

        .features-section {
            padding: 15px;
            text-align: center;
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
            flex-shrink: 0;
        }

        .features-section h3 {
            color: #2c3e50;
            margin-bottom: 8px;
            font-size: 1.2em;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }

        .feature-item {
            background: white;
            padding: 8px;
            border-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .feature-item h4 {
            margin-bottom: 4px;
            font-size: 0.9em;
        }

        .feature-item p {
            color: #7f8c8d;
            font-size: 0.75em;
            line-height: 1.2;
        }

        @media (max-width: 768px) {
            .architecture {
                grid-template-columns: 1fr;
            }
            
            .modules-grid {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 1.6em;
            }
            
            .tech-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>小型超市管理系统</h1>
            <p>系统功能框架图 - 前后端架构设计</p>
        </div>

        <div class="architecture">
            <!-- 前端部分 -->
            <div class="section">
                <h2>前端系统 (Frontend)</h2>
                
                <div class="modules-grid">
                    <div class="module">
                        <h3>用户界面层 (UI Layer)</h3>
                        <ul>
                            <li>HTML5 页面结构</li>
                            <li>CSS3 样式设计</li>
                            <li>响应式布局</li>
                            <li>现代化UI组件</li>
                        </ul>
                    </div>

                    <div class="module">
                        <h3>前台POS系统</h3>
                        <ul>
                            <li>收银台界面 (index.html)</li>
                            <li>商品扫描录入</li>
                            <li>购物车管理</li>
                            <li>会员卡识别</li>
                            <li>结账处理</li>
                            <li>交班管理 (shift.html)</li>
                        </ul>
                    </div>

                    <div class="module">
                        <h3>后台管理系统</h3>
                        <ul>
                            <li>系统主页 (admin.html)</li>
                            <li>进货管理 (purchase.html)</li>
                            <li>销售管理 (saleadmin.html)</li>
                            <li>库存管理 (stock.html)</li>
                            <li>会员管理 (memberadmin.html)</li>
                            <li>数据统计 (stats.html)</li>
                        </ul>
                    </div>

                    <div class="module">
                        <h3>JavaScript功能模块</h3>
                        <ul>
                            <li>POS收银逻辑 (pos.js)</li>
                            <li>管理员图表 (admin-charts.js)</li>
                            <li>会员管理 (member-admin.js)</li>
                            <li>销售管理 (sale-admin.js)</li>
                            <li>库存管理 (stock-admin.js)</li>
                            <li>数据统计 (stats.js)</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 后端部分 -->
            <div class="section">
                <h2>后端系统 (Backend)</h2>
                
                <div class="modules-grid">
                    <div class="module">
                        <h3>API接口层</h3>
                        <ul>
                            <li>RESTful API设计</li>
                            <li>HTTP请求处理</li>
                            <li>数据验证</li>
                            <li>错误处理</li>
                            <li>跨域支持</li>
                        </ul>
                    </div>

                    <div class="module">
                        <h3>业务逻辑层</h3>
                        <ul>
                            <li>商品管理服务</li>
                            <li>销售处理服务</li>
                            <li>库存管理服务</li>
                            <li>会员管理服务</li>
                            <li>交班管理服务</li>
                            <li>数据统计服务</li>
                        </ul>
                    </div>

                    <div class="module">
                        <h3>数据访问层</h3>
                        <ul>
                            <li>数据库连接管理</li>
                            <li>SQL查询执行</li>
                            <li>事务处理</li>
                            <li>数据映射</li>
                            <li>连接池管理</li>
                        </ul>
                    </div>

                    <div class="module">
                        <h3>系统服务</h3>
                        <ul>
                            <li>用户认证授权</li>
                            <li>日志记录</li>
                            <li>数据备份</li>
                            <li>性能监控</li>
                            <li>安全防护</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 数据库部分 -->
            <div class="database-section">
                <h2>数据库设计 (Database)</h2>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px;">
                    <div class="db-table">
                        <h4>商品信息表 (commodity_information)</h4>
                        <p>存储商品基本信息：名称、条码、类别、价格、进货价、保质期、状态等</p>
                    </div>
                    
                    <div class="db-table">
                        <h4>销售信息表 (sale_information)</h4>
                        <p>记录销售交易：商品名、数量、总价、收银员、会员ID、时间等</p>
                    </div>
                    
                    <div class="db-table">
                        <h4>库存信息表 (stored_information)</h4>
                        <p>管理商品库存：商品ID、库存数量、入库时间、出库时间等</p>
                    </div>
                    
                    <div class="db-table">
                        <h4>会员信息表 (member_information)</h4>
                        <p>会员管理：姓名、联系方式、开卡日期、过期日期、状态等</p>
                    </div>
                    
                    <div class="db-table">
                        <h4>交班信息表 (handover_information)</h4>
                        <p>收银员交班记录：交班时间、交班人、接班人、金额、备注等</p>
                    </div>
                    
                    <div class="db-table">
                        <h4>进货计划表 (plan_information)</h4>
                        <p>进货计划管理：商品名称、数量、状态、操作等</p>
                    </div>
                    
                    <div class="db-table">
                        <h4>用户表 (users)</h4>
                        <p>系统用户管理：用户名、密码、角色、权限等</p>
                    </div>
                    
                    <div class="db-table">
                        <h4>销售统计表 (sale_statistics_information)</h4>
                        <p>销售数据统计：日期、销售额、订单数、商品数等</p>
                    </div>
                </div>
            </div>

            <!-- 技术栈 -->
            <div class="tech-stack">
                <h2>技术栈 (Technology Stack)</h2>
                
                <div class="tech-grid">
                    <div class="tech-item">
                        <h4>前端技术</h4>
                        <p>HTML5, CSS3, JavaScript<br>ECharts图表库<br>响应式设计</p>
                    </div>
                    
                    <div class="tech-item">
                        <h4>后端技术</h4>
                        <p>Rust编程语言<br>Axum框架<br>数据库驱动</p>
                    </div>
                    
                    <div class="tech-item">
                        <h4>数据库</h4>
                        <p>MySQL 8.0<br>关系型数据库<br>事务支持</p>
                    </div>
                    
                    <div class="tech-item">
                        <h4>系统架构</h4>
                        <p>前后端分离<br>RESTful API<br>模块化设计</p>
                    </div>
                    
                    <div class="tech-item">
                        <h4>部署方式</h4>
                        <p>静态文件服务<br>可执行文件<br>跨平台支持</p>
                    </div>
                    
                    <div class="tech-item">
                        <h4>开发工具</h4>
                        <p>代码编辑器<br>数据库管理<br>版本控制</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="features-section">
            <h3>系统特点</h3>
            <div class="features-grid">
                <div class="feature-item">
                    <h4 style="color: #27ae60;">🎯 功能完整</h4>
                    <p>涵盖超市运营的各个环节，从收银到库存管理</p>
                </div>
                <div class="feature-item">
                    <h4 style="color: #3498db;">⚡ 性能高效</h4>
                    <p>基于Rust开发，提供高性能的数据处理能力</p>
                </div>
                <div class="feature-item">
                    <h4 style="color: #e74c3c;">📊 数据可视化</h4>
                    <p>丰富的图表展示，直观的数据分析界面</p>
                </div>
                <div class="feature-item">
                    <h4 style="color: #f39c12;">🔒 安全可靠</h4>
                    <p>完善的用户认证和权限管理机制</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 